<template>
  <!--!!! 快递员管理！！！ -->
  <div class="branches">
    <div class="app-container">
      <!-- 上 -->
      <div class="top background">
        <div class="input">
          <span>快递员账号:</span>
          <el-input v-model="pageParams.account" medium placeholder="请输入快递员账号" type="text" style="width: 250px; margin: 10px;" />
        </div>
        <div class="input">
          <span>快递员姓名:</span>
          <el-input v-model="pageParams.name" medium placeholder="请输入快递员姓名" type="text" style="width: 250px; margin: 10px; " />
        </div>
        <div class="input">
          <span>快递员手机号:</span>
          <el-input v-model="pageParams.phone" medium placeholder="请输入快递员手机号" type="text" style="width: 250px; margin: 10px;" />
        </div>
        <div class="input">
          <span>所属机构:</span>
          <el-cascader
            v-model="pageParams.agentId"
            placeholder="请输入所属机构"
            :options="tree"
            :props="defaultProps"
            :show-all-levels="false"
            clearable
            @change="handleChange"
          />

        </div>
        <div class="input">
          <el-button medium type="primary" @click="seek">搜索</el-button>
          <el-button medium @click="reset">重置</el-button>
        </div>
      </div>
      <!-- 下 -->
      <div class="button background">
        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          stripe
        >
          <el-table-column
            type="index"
            label="序号"
            width="150"
          />
          <el-table-column
            prop="account"
            label="快递员账号"
            width="300"
          />
          <el-table-column
            prop="name"
            label="快递员姓名"
            width="300"
          />
          <el-table-column
            prop="mobile"
            label="快递员手机号"
            width="250"
          />
          <el-table-column
            prop="agency.name"
            label="所属机构"
            width="300"
          />
          <el-table-column
            prop="workStatus"
            label="工作状态"
            width="300"
          >
            <template v-slot="{row}">
              <span v-if="row.workStatus===1"> <span class="dot" />工作</span>
              <span v-else> <span class="dot1" />休息</span>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作">
            <template v-slot="{row}">
              <el-button
                type="text"
                size="small"
                @click.native.prevent="scope(row)"
              >
                作业范围分配
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
          <el-pagination
            :current-page="pageParams.page"
            :page-size="pageParams.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCourierList, getTree } from '@/api/courier'
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id',
        checkStrictly: true,
        emitPath: false
      },
      tree: [], // 机构树状列表
      counts: 0, // 快递员列表总数
      tableData: [], // 快递员列表
      pageParams: {
        page: 1, // 页数切换
        pageSize: 10, // 页面数量
        agentId: '', // 机构id
        name: '', // 快递员名字
        phone: '', // 电话
        account: ''// 快递员编码
      }
    }
  },
  created() {
    this.TreeList()
    this.getCourierList()
  },
  methods: {
    // 快递员列表
    async getCourierList() {
      const res = await getCourierList(this.pageParams)
      // console.log(res.data)
      this.tableData = res.data.items
      this.counts = Number(res.data.counts)
    },
    // 分页-页码切换
    handleCurrentChange(newPage) {
      this.pageParams.page = newPage
      this.getCourierList()
    },
    // 重置
    reset() {
      this.pageParams.agentId = ''
      this.pageParams.name = ''
      this.pageParams.phone = ''
      this.pageParams.account = ''
      this.getCourierList()
    },
    // 搜索
    seek() {
      this.getCourierList()
      // 所属机构 未完成
    },
    // 作业范围分配
    scope(row) {
      console.log(row)
      this.$router.push(`/transit2/courier/MapContent/${row.userId}/2/${row.agency.name}`)
    },
    // 树状-机构
    async TreeList() {
      const res = await getTree()
      // console.log(res.data)
      this.tree = JSON.parse(res.data)
      console.log(this.tree)
    },
    // 选择框-切换-有bug
    handleChange(value) {
      console.log(value)
      this.pageParams.agentId = value.__ob__.dep.id
      this.getCourierList()
    },
    // 页码发生改变
    handleSizeChange(newPageSize) {
      this.pageParams.pageSize = newPageSize
      this.getdriverList()
    }

  }
}
</script>

<style scoped>
.branches{
  margin-left: 20px;
  margin-right: 20px;

}
.background{
  background: #ffffff;
  margin-bottom:25px ;
  padding: 30px;
}
.top{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: baseline;
  padding-left: 50px;
}
.button{
  height: 700px;
}
.input{
  margin-right: 45px;
  width: 400px;
}
.block{
  font-size: 24px;
  margin-top: 50px;
  display:flex;
  justify-content: center;
}
.dot{
  display: inline-block;
  width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    align-items: center;
    margin:2.5px;
    margin-right: 8px;
}
.dot1{
  display: inline-block;
  width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
    align-content: center;
    margin:2.5px;
    margin-right: 8px;
}
</style>
